<!-- 布局自适应 -->

<template>
    <div>
     <el-container>
      <el-header>

      <!-- 用户中心 -->
          <span class="welcome">
              您好，吴女士
          </span>
        <!-- 头部的tab栏 -->
          <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="基础信息" name="first"class="news" v-model="isCollapse" >基础信息</el-tab-pane>
              <el-tab-pane label="业务数据" name="second" class="data">业务数据</el-tab-pane>
            </el-tabs>
          </template>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 侧边栏 -->
           <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>基础信息
                  </span>
                </template>
              </el-submenu>
                <template slot="title" >
                  <i class="el-icon-location"></i>
                  <span>系统数据</span>
                </template>
                <el-menu-item-group >
                  <el-menu-item index="">企业信息</el-menu-item>
                  <el-menu-item index="1-2">角色管理</el-menu-item>
                  <el-menu-item index="1-2">企业管理</el-menu-item>
                  <el-menu-item index="1-2">操作员管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>企业设备管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">设备管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>前端展示屏配置</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">展示屏菜单管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
             
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>展示屏菜单管理</span>
                </template>
              </el-submenu>
            </el-menu>
            
              </el-aside>
              <el-container>
              <!--  <el-footer>Footer</el-footer> -->
                <el-main>
                </el-main>
              </el-container>
            </el-container>
          </el-container>
    </div>
</template>
<script>
    export default{
        data() {
            return{
                activeName: 'second',
                isCollapse: true,
                 handleOpen(key, keyPath) {
                  console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                  console.log(key, keyPath);
                }
            }
        },
         methods: {
            handleClick(tab, event) {
              console.log(tab, event);
            }
         }
     }
    
</script>
<style lang="scss" >
     .el-header,  {
    background-color: #1DA02B;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-footer{
    background-color: #E3E3E3;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(-90deg); 
	-ms-transform: rotate(-90deg);
	transform: rotateZ(-90deg); 
}
/*菜单展开*/
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(0deg); 
	-ms-transform: rotate(0deg);
	transform: rotateZ(0deg); 
}
.jiantou{
  width:50px;
  height:50px;
  background-color: green;
}
.welcome, {
    color: white;
    float:right;
  }
  
</style>